<template>
  <div class="toptit">
    <van-nav-bar :border="false" safe-area-inset-top class="bar">
      <template #title>
        <div style="color: #fff">个人中心</div>
      </template>
      <template #right>
        <van-icon name="setting-o" size="25" color="#fff" @click="getsettingpage" />
      </template>
    </van-nav-bar>
    <!--  -->
    <div>
      <div class="touxiang">
        <router-link to="/login" class="routerlink">
          <van-image round width="2.3rem" height="2.3rem" fit="cover" :src="tximg" />
        </router-link>
      </div>

      <router-link to="/login" v-if="name == '登录/注册'">
        <div class="name">{{ name }}</div>
      </router-link>
      <div v-else class="name">{{ name }}</div>
    </div>
    <div class="bjkong">
      <div class="br"></div>
      <div class="flex">
        <div class="content" v-for="item in tarimgs" :key="item.id" @click="topro(item.title)">
          <img :src="item.imgurl" />
          <!-- <div class="tx">{{ item.num }}</div> -->
          <div class="tx1">{{ item.title }}</div>
        </div>
      </div>
    </div>
    <div class="xian bg"></div>
    <div class="imn">
      <!-- <div class="bottommian" v-for="item in btmimgs" :key="item.id"  @click="topro(item.title)">
        <p>{{ item.title }}</p>
        <img :src="item.imgurl" />
      </div> -->
      <!--  -->
      <div class="bottommian" @click="topro(btmimgs[0].title)">
        <p>我的收藏</p>
        <img :src="btmimgs[0].imgurl" />
      </div>
      <div class="bottommian">
        <router-link to="/mine/cscenter">
          <p>我的简历</p>
          <img :src="btmimgs[1].imgurl" />
        </router-link>
      </div>
      <div class="bottommian">
        <router-link to="/yijian">
          <p>意见反馈</p>
          <img :src="btmimgs[2].imgurl" />
        </router-link>
      </div>
      <div class="bottommian">
        <router-link to="/gywm">
          <p>关于我们</p>
          <img :src="btmimgs[3].imgurl" />
        </router-link>
      </div>
    </div>
    <div class="h50"></div>
  </div>
</template>

<script>
import $router from "../router/index";
import { reactive, toRefs } from "vue";
export default {
  name: "Mine",
  setup() {
    const data = reactive({
      name: localStorage.getItem("usedata")
        ? JSON.parse(localStorage.getItem("usedata")).name
        : "登录/注册",
    });
    const tximg = require("../assets/mine/tx.png");
    const tarimgs = [
      {
        imgurl: require("../assets/mine/ybm.png"),
        title: "已报名",
        num: 2,
      },
      {
        imgurl: require("../assets/mine/ylq.png"),
        title: "已录取",
        num: 2,
      },
      {
        imgurl: require("../assets/mine/kfzx.png"),
        title: "已到岗",
        num: 2,
      },
      {
        imgurl: require("../assets/mine/ywc.png"),
        title: "已完成",
        num: 2,
      },
    ];
    const btmimgs = [
      {
        imgurl: require("../assets/mine/djck.png"),
        title: "我的收藏",
      },
      {
        imgurl: require("../assets/mine/lxkf.png"),
        title: "客服中心",
      },
      {
        imgurl: require("../assets/mine/fkzx.png"),
        title: "意见反馈",
      },
      {
        imgurl: require("../assets/mine/gywm.png"),
        title: "关于我们",
      },
    ];
    function onClickRight() {}
    function topro(tit) {
      // console.log(tit);
      $router.push({ path: "/projectlist", query: { tit: tit } });
    }

    return {
      onClickRight,
      tarimgs,
      btmimgs,
      tximg,
      topro,
      ...toRefs(data),
    };
  },
  methods: {
    //跳转到设置页面
    getsettingpage() {
      this.$router.push("/mine/setting");
    },
  },
};
</script>

<style lang="scss" scoped>
.routerlink {
  width: 2.3rem;
  height: 2.3rem;
}
.h50 {
  height: 50px;
}
.br {
  height: 100px;
}
a {
  text-decoration: none; /* 去除默认的下划线 */
  outline: none; /* 去除旧版浏览器的点击后的外虚线框 */
  color: #000;
}
.toptit {
  height: 250px;
  background-image: url("../assets/mine/bj.png");
  background-size: 100% 100%;
}
.bar {
  color: #fff;
  background: transparent;
}
.touxiang {
  background-image: url("../assets/mine/tx.png");
  background-size: 100% 100%;
  background: #fff;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  text-align: center;
  padding: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  box-shadow: 0px 2px 5px 1px #a2a2a2;
  position: relative;
}
.name {
  margin-top: 10px;
  text-align: center;
  font-size: 18px;
}
.bjkong {
  width: 92%;
  margin: 0 auto;
  border-radius: 5px;
  background: #fff;
  height: 210px;
  margin-top: -75px;
  box-shadow: 0px 6px 15px 2px #dedede;
}
.xian {
  height: 10px;
  width: 100%;
  margin: 15px auto 5px;
}
.flex {
  img {
    width: 60%;
  }
  .tx {
    font-size: 15px;
    margin: 2px 0;
  }
  .tx1 {
    font-size: 14px;
    color: #a4a4a4;
  }
}
.imn {
  width: 92%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  .bottommian {
    width: 46%;
    p {
      font-size: 16px;
      font-weight: 600;
    }
    img {
      width: 100%;
    }
  }
}
</style>